<template>
  <div class="home">
    <vheader title="首页"
    @faleft="clickLeft">
      <div slot="right">
        <i class="fa fa-search"></i>
        <i class="fa fa-bell-o"></i>
      </div>
    </vheader>
    <swiper :options="swiperOption"  ref="mySwiper">
      <swiper-slide v-for="(item,index) in banners" :key="index">
        <img :src="item">
      </swiper-slide>
      <section class="swiper-pagination" slot="pagination"></section>  
    </swiper>
    <vmain-nav></vmain-nav>
    <v-bar></v-bar>
    <v-title tit="今日促销"></v-title>
    <v-goods :goodsItem="goodsLists"></v-goods>
    <v-bar></v-bar>
    <v-title tit="精选好茶"></v-title>
    <good-tea :fineTea="goodTea"></good-tea>
    <v-bar></v-bar>
    <shop-sale :sale="salelist"></shop-sale>
    <vfoot></vfoot>
  </div>


</template>
<script>
import header from "../../components/header/header";
import foot from "../../components/foot/foot";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import mainNav from "./mainNav/mainNav";
import bar from "../../components/bar/bar";
import vTitle from "../../components/vTitle/vTitle";
import goods from "./goods/goods";
import goodTea from "./goodTea/goodTea";
import shopSale from "./shopSale/shopSale";
export default {
  name: "home",
  components: {
    vheader: header,
    vfoot: foot,
    swiper,
    swiperSlide,
    vmainNav: mainNav,
    vBar: bar,
    vTitle,
    vGoods: goods,
    goodTea,
    shopSale,
  },
  data() {
    return {
      banners: [
        require("./banner1.jpg"),
        require("./banner2.jpg"),
        require("./banner3.jpg")
      ],
      swiperOption: {
        autoplay: 500,
        pagination: ".swiper-pagination",
        loop: true
      },
      goodsLists: [],
      goodTea:{},
      salelist:[],
    };
  },
  created(){
    Promise.all([this.$http.get(
      "https://www.easy-mock.com/mock/5a03bfdb99a15b53f2308dfa/goods/goods"
      ),
      this.$http.get(
      "https://www.easy-mock.com/mock/59fc22e013b54e4771d5444d/tea/goodTea"
      ),
      this.$http.get(
        "https://www.easy-mock.com/mock/5a03e9078b2d255e672c56e5/sale/sale"
      )]).then(result =>{
      const goods=this.hasSuccess(result[0]);
      const gTea =this.hasSuccess(result[1]);
      const sale=this.hasSuccess(result[2]);
      this.goodsLists=goods;
      this.goodTea=gTea;
      this.salelist=sale;
    })
  },
  methods: {
    clickLeft() {
      this.$router.go(-1);
    },
    hasSuccess(result){
       result=result.body;
      if (result.code === 200) {
        return result.data;
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.swiper-container img {
  width: 100%;
}
</style>


